/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      登录      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

#Login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff;
  text-align: center;
  background: #eee center no-repeat;
  background-image: url(./img/bg.png);
  background-size: cover;
  overflow: hidden;

  /* ============================== 标题 ============================== */
  &-title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  /* ============================== 表单 ============================== */
  > .CoreWeb-WebForm {
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    width: 24rem;
    padding: 4rem 2rem;
    background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
    border-radius: 1rem;
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    transform: translate(-50%, -50%);

    /* —————————————————————————————— 输入框 —————————————————————————————— */
    .el-input__inner {
      color: #fff;
      background: transparent;
    }

    /* —————————————————————————————— 按钮 —————————————————————————————— */
    .el-button {
      width: 50%;
      margin-top: 1rem;
    }
  }

  /* ============================== 方块 ============================== */
  .Login-square {
    position: absolute;
    bottom: -20vh;
    width: 40px;
    height: 40px;
    background-color: var(--White15);
    animation: LoginSquareAnim 25s infinite;
    transition-timing-function: linear;

    &:nth-child(1) {
      left: 10%;
    }
    &:nth-child(2) {
      left: 20%;
      width: 80px;
      height: 80px;
      animation-delay: 2s;
      animation-duration: 17s;
    }
    &:nth-child(3) {
      left: 25%;
      animation-delay: 4s;
    }
    &:nth-child(4) {
      left: 40%;
      width: 60px;
      height: 60px;
      animation-duration: 22s;
      background-color: var(--White25);
    }
    &:nth-child(5) {
      left: 70%;
    }
    &:nth-child(6) {
      left: 80%;
      width: 120px;
      height: 120px;
      animation-delay: 3s;
      background-color: var(--White2);
    }
    &:nth-child(7) {
      left: 32%;
      width: 160px;
      height: 160px;
      animation-delay: 7s;
    }
    &:nth-child(8) {
      left: 55%;
      width: 20px;
      height: 20px;
      animation-delay: 15s;
      animation-duration: 40s;
    }
    &:nth-child(9) {
      left: 25%;
      width: 10px;
      height: 10px;
      animation-delay: 2s;
      animation-duration: 40s;
      background-color: var(--White3);
    }
    &:nth-child(10) {
      left: 90%;
      width: 160px;
      height: 160px;
      animation-delay: 11s;
    }
  }

  @keyframes LoginSquareAnim {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-120vh) rotate(600deg);
    }
  }
}
